@use 'sass:map';

// 科幻风格UI色调系统 - SCSS变量定义
// 分类说明：按功能角色划分，保持视觉一致性和使用规范性

// ==========================================
// 1. 基础主色调（品牌核心色）
// 用途：定义UI的核心视觉识别，占比最高的基础色调
// ==========================================
$color-primary: (
        cyan: (
                base: #00f0ff,
                light: #66e6ff,
                lighter: #b3f2ff,
                dark: #00a8cc,
                darker: #007a99,
                alpha-10: rgba(0, 240, 255, 0.1),
                alpha-20: rgba(0, 240, 255, 0.2),
                alpha-30: rgba(0, 240, 255, 0.3),
                description: "主色调，用于标题、核心图标、重点边框"
        ),
        blue: (
                base: #00a8ff,
                light: #66c5ff,
                lighter: #b3e2ff,
                dark: #007acc,
                darker: #005c99,
                alpha-10: rgba(0, 168, 255, 0.1),
                alpha-20: rgba(0, 168, 255, 0.2),
                description: "次级主色，用于链接、进度指示、次要交互元素"
        )
);

// ==========================================
// 2. 功能辅助色（状态与操作指示）
// 用途：表达状态、分类和操作结果，与主色形成功能区分
// ==========================================
$color-functional: (
        success: (
                base: #00ff9d,
                light: #66ffc5,
                lighter: #b3ffde,
                dark: #00cc7a,
                darker: #00995c,
                alpha-10: rgba(0, 255, 157, 0.1),
                description: "表示成功、正常运行、健康状态"
        ),
        warning: (
                base: #ffc107,
                light: #ffd555,
                lighter: #ffe8a3,
                dark: #cca000,
                darker: #997500,
                alpha-10: rgba(255, 193, 7, 0.1),
                description: "表示警告、需注意事项、中等资源状态"
        ),
        danger: (
                base: #ff2e63,
                light: #ff6b8f,
                lighter: #ffa8bc,
                dark: #cc003d,
                darker: #99002e,
                alpha-10: rgba(255, 46, 99, 0.1),
                description: "表示错误、故障、危险操作、资源不足"
        ),
        special: (
                base: #a78bfa,
                light: #c4a9ff,
                lighter: #e1d6ff,
                dark: #7f5cd0,
                darker: #5f45a6,
                alpha-10: rgba(167, 139, 250, 0.1),
                description: "表示特殊功能、加密、未知状态、高级选项"
        ),
        maintenance: (
                base: #ff7d00,
                light: #ff9e55,
                lighter: #ffbf90,
                dark: #cc6400,
                darker: #994b00,
                alpha-10: rgba(255, 125, 0, 0.1),
                description: "表示维护中、手动干预、需要关注的元素"
        )
);

// ==========================================
// 3. 背景色调（层级构建）
// 用途：通过明暗对比构建界面层级，增强空间感
// ==========================================
$color-background: (
        global: (
                base: #050a1a,
                light: #0a1129,
                lighter: #0f1838,
                dark: #030712,
                darker: #02040a,
                description: "页面最底层背景，营造深邃空间感"
        ),
        panel: (
                base: rgba(10, 17, 40, 0.85),
                light: rgba(15, 25, 54, 0.85),
                dark: rgba(5, 10, 26, 0.95),
                description: "用于卡片、模块、面板的背景，形成内容区块"
        ),
        accent: (
                base: rgba(0, 240, 255, 0.05),
                light: rgba(0, 240, 255, 0.1),
                dark: rgba(0, 240, 255, 0.02),
                description: "用于突出显示的区域，如选中项、活跃模块"
        )
);

// ==========================================
// 4. 文本色调（信息层级）
// 用途：区分文本重要性，确保深色背景上的可读性
// ==========================================
$color-text: (
        primary: (
                base: #e0e0e0,
                light: #ffffff,
                dark: #b0b0b0,
                description: "主要内容文本，确保与深色背景高对比度"
        ),
        secondary: (
                base: #a0a0a0,
                light: #c0c0c0,
                dark: #808080,
                description: "辅助说明、次要信息，比主文本弱化"
        ),
        tertiary: (
                base: #606060,
                light: #808080,
                dark: #404040,
                description: "禁用状态、占位文本，低对比度"
        ),
        link: (
                base: #00a8ff, // 直接使用颜色值，避免循环引用
                hover: #00f0ff, // 直接使用颜色值，避免循环引用
                visited: #9d4edd,
                description: "超链接文本，hover时增强为青色"
        )
);

// ==========================================
// 5. 边框与分隔线色调
// 用途：元素边界定义和区域分隔
// ==========================================
$color-border: (
        default: (
                base: rgba(0, 240, 255, 0.2),
                hover: rgba(0, 240, 255, 0.4),
                focus: rgba(0, 240, 255, 0.6),
                description: "通用边框，hover时增强透明度"
        ),
        accent: (
                base: rgba(0, 240, 255, 0.4),
                hover: rgba(0, 240, 255, 0.6),
                description: "用于重点元素的边框，如活跃卡片、核心按钮"
        ),
        divider: (
                base: linear-gradient(90deg,
                        rgba(0, 240, 255, 0) 0%,
                        rgba(0, 240, 255, 0.5) 50%,
                        rgba(0, 240, 255, 0) 100%),
                vertical: linear-gradient(0deg,
                        rgba(0, 240, 255, 0) 0%,
                        rgba(0, 240, 255, 0.5) 50%,
                        rgba(0, 240, 255, 0) 100%),
                description: "区域分隔线，渐变效果增强科技感"
        )
);

// ==========================================
// 6. 阴影与发光效果色调
// 用途：增强元素立体感和科幻发光效果
// ==========================================
$color-shadow: (
        default: (
                base: 0 2px 8px rgba(0, 0, 0, 0.3),
                lg: 0 4px 16px rgba(0, 0, 0, 0.4),
                xl: 0 8px 24px rgba(0, 0, 0, 0.5),
                description: "通用阴影，增强元素立体感"
        ),
        glow-cyan: (
                base: "0 0 5px rgba(0, 240, 255, 0.5)",
                lg: "0 0 10px rgba(0, 240, 255, 0.7), 0 0 15px rgba(0, 240, 255, 0.3)",
                xl: "0 0 15px rgba(0, 240, 255, 0.5), 0 0 30px rgba(0, 240, 255, 0.3)",
                description: "青色发光效果，用于主色调元素"
        ),
        glow-success: (
                base: "0 0 5px rgba(0, 255, 157, 0.5)",
                lg: "0 0 10px rgba(0, 255, 157, 0.7), 0 0 15px rgba(0, 255, 157, 0.3)",
                description: "绿色发光效果，用于成功状态元素"
        ),
        glow-warning: (
                base: "0 0 5px rgba(255, 193, 7, 0.5)",
                lg: "0 0 10px rgba(255, 193, 7, 0.7), 0 0 15px rgba(255, 193, 7, 0.3)",
                description: "黄色发光效果，用于警告状态元素"
        ),
        glow-danger: (
                base: "0 0 5px rgba(255, 46, 99, 0.5)",
                lg: "0 0 10px rgba(255, 46, 99, 0.7), 0 0 15px rgba(255, 46, 99, 0.3)",
                description: "红色发光效果，用于错误状态元素"
        )
);


// ==========================================
// 快捷引用变量（简化使用）
// ==========================================
// 主色快捷引用
$cyan: map.get(map.get($color-primary, cyan), base);
$cyan-light: map.get(map.get($color-primary, cyan), light);
$cyan-dark: map.get(map.get($color-primary, cyan), dark);
$blue: map.get(map.get($color-primary, blue), base);
$blue-light: map.get(map.get($color-primary, blue), light);
$blue-dark: map.get(map.get($color-primary, blue), dark);

// 功能色快捷引用
$success: map.get(map.get($color-functional, success), base);
$warning: map.get(map.get($color-functional, warning), base);
$danger: map.get(map.get($color-functional, danger), base);
$special: map.get(map.get($color-functional, special), base);
$maintenance: map.get(map.get($color-functional, maintenance), base);

// 背景色快捷引用
$bg-global: map.get(map.get($color-background, global), base);
$bg-panel: map.get(map.get($color-background, panel), base);
$bg-accent: map.get(map.get($color-background, accent), base);

// 文本色快捷引用
$text-primary: map.get(map.get($color-text, primary), base);
$text-secondary: map.get(map.get($color-text, secondary), base);
$text-tertiary: map.get(map.get($color-text, tertiary), base);